<template>
  <div class="header-up">
    <h1><a href="www.douban.com">豆瓣</a></h1>
     <div class="search">
        <el-input placeholder="电影、电视剧、游戏、生活" v-model="content">
         <i slot="suffix" class="el-input__icon el-icon-search" @click="search()"></i>
        </el-input>
      </div>
       <ul>
          <li v-for="bar in bars" :key="bar.title">
            <router-link target="_blank" :to="bar.url" :class="bar.class" >{{bar.title}}</router-link>
          </li>
      </ul>

  </div>
</template>

<script>
export default {
  data () {
    return {
      content: '',
      bars: [
        { url: '/movies', title: '影视', class: 'link_movie' },
        { url: '/musics', title: '音乐', class: 'link_music' },
        { url: '/books', title: '读书', class: 'link_book' }
        // { url: '/games', title: '游戏', class: 'link_movie' },
        // { url: '/lives', title: '生活', class: 'link_movie' }
      ]
    }
  },
  methods: {
    search () {
      console.log('shousou')
    }
  }
}
</script>

<style lang="scss">
.header-up{
  height: 90px;
  width: 950px;
  position: relative; /*先对定位 具体意思 TODO */
  margin: 0 auto;  /* 实现居中效果的是这个。 说明下margin。正常是4个值，分别是上，右，下，左。 当有3个值时，上，右左，下；2个值是上下，右左。这里就是说上下是0，左右自动。而自动意思就是平分2遍宽度。这样，从而实现居中效果 */
   h1 a{
      display: block; /* 块级元素  占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形 */
      position: absolute;
      left: 0px;
      top: 30px;
      background: url('../../assets/images/logo_db.png') no-repeat;
      width: 154px;
      height: 30px;
      color: transparent;  /* 全透明色彩，表示背景透明 */
   }
  .search{
    width: 260px;
    height: 30px;
    position: absolute; /* 绝对定位  这种父级是relative ，子级是absolute的定位方式，长用于无论浏览器如何改变，都是相对浏览器的定位 */
    left: 184px;
    top: 30px;
    i{
      cursor:pointer;
    }
  }
  ul{
    display: inline-block; /* inline:行内元素，特点：1.与其他行内元素共享一行，不会独占一行；2：不能更改元素的height，width的值，大小由内容撑开；3：可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行.
    block：块级元素，特点：1.独占一行；2.可改变height，width；3.padding，margin都有效
    inline-block：融合行内于块级，结合了inline第一条和block第2，3条的特点。总结就是：不独占一行的块级元素 */
    width: 481.41px;
    height: 21px;
    li{
      list-style-type: none;
      display:inline-block;
      a{
         display: inline-block;
        width: 45px;
        height: 20px;
      }
      a.link_movie{
        position: absolute;
        left: 488px;
        top: 33px;
        color: transparent;
        /* 分析下这里是如何实现一张图 能分别显示到正确的a标签上。首先图片中文字的大小正好是45*20，和a标签的大小相同，然后图片中每组字之间的间隔大约是59px
        background：url() xxpx xxpx no-repeat
         这里其实是3个css的组合 background-image: url() 设置背景图片
          background-position： -59px 0px 设置图片位置。图片的远点坐标是左上角，往右和往下的都是负的
          background-repeat： no-repeat ： 重复方式，是不重复*/
        background: url('../../assets/images/anony_nav_logo.png') -59px 0 no-repeat;
      }
      a.link_music{
        position: absolute;
        left: 547px;
        top: 33px;
        color: transparent;
        background: url('../../assets/images/anony_nav_logo.png') -120px 0 no-repeat;
      }
       a.link_book{
        position: absolute;
        left: 606px;
        top: 33px;
        color: transparent;
        background: url('../../assets/images/anony_nav_logo.png') 0 0 no-repeat;
      }

    }
  }
}

</style>
